<template>
    <view>
        <BaseNavbar title="数据看板" />
        <BaseSearch placeholder="下级备注名称" @search="search" />
        <view class="subsection" @click="handleSubsection">
            <view class="subsetion_title">

                <view>

                    订单数据
                </view>

                <view class="title_right">
                    <BaseIconModal name="info-circle" mode="bottom" size="30" color="#333" v-if="prompt">
                        {{ prompt }}
                    </BaseIconModal>
                </view>

            </view>
            <u-subsection mode="subsection" :active-color="mainColor" :list="subsectionList" :current="current"
                @change="changeSubsection" />
            <view class="profit">
                <view class="profit-title">选择周期：{{ dateTime.startDate }} ~ {{ dateTime.endDate }}</view>
                <view class="profit_item_box">
                    <view class="profit_item" v-for="(item, i) in 7" :key="i">
                        <text>{{ '订单总量' }}</text>
                        <text>{{ '0.00' }}</text>
                        <text>{{ '0.00' }}%</text>
                    </view>
                    <view class="profit_text">
                        {{ '近30天的订单数据变化' }}
                    </view>
                </view>
                <UCharts :lineData="lineData" :chartsName="`统计时间${dateTime.endDate}`" />
            </view>


            <u-calendar v-model="showCalendar" mode="range" :safe-area-inset-bottom="true" btn-type="error"
                :range-color="mainColor" :active-bg-color="mainColor" :change-year="false" @change="changeCalendar">
            </u-calendar>

        </view>
        <view class="subsection" @click="handleSubsection">
            <view class="subsetion_title">

                <view>

                    订单数据
                </view>

                <view class="title_right">
                    <BaseIconModal name="info-circle" mode="bottom" size="30" color="#333" v-if="prompt">
                        {{ prompt }}
                    </BaseIconModal>
                </view>

            </view>
            <u-subsection mode="subsection" :active-color="mainColor" :list="subsectionList" :current="current"
                @change="changeSubsection" />
            <view class="profit">
                <view class="profit-title">选择周期：{{ dateTime.startDate }} ~ {{ dateTime.endDate }}</view>
                <view class="profit_item_box">
                    <view class="profit_item" v-for="(item, i) in 7" :key="i">
                        <text>{{ '订单总量' }}</text>
                        <text>{{ '0.00' }}</text>
                        <text>{{ '0.00' }}%</text>
                    </view>
                    <view class="profit_text">
                        {{ '近30天的订单数据变化' }}
                    </view>
                </view>
                <UCharts :lineData="lineData" :chartsName="`统计时间${dateTime.endDate}`" />
            </view>


            <u-calendar v-model="showCalendar" mode="range" :safe-area-inset-bottom="true" btn-type="error"
                :range-color="mainColor" :active-bg-color="mainColor" :change-year="false" @change="changeCalendar">
            </u-calendar>

        </view>
        <view class="subsection" @click="handleSubsection">
            <view class="subsetion_title">

                <view>

                    订单数据
                </view>

                <view class="title_right">
                    <BaseIconModal name="info-circle" mode="bottom" size="30" color="#333" v-if="prompt">
                        {{ prompt }}
                    </BaseIconModal>
                </view>

            </view>
            <u-subsection mode="subsection" :active-color="mainColor" :list="subsectionList" :current="current"
                @change="changeSubsection" />
            <view class="profit">
                <view class="profit-title">选择周期：{{ dateTime.startDate }} ~ {{ dateTime.endDate }}</view>
                <view class="profit_item_box">
                    <view class="profit_item" v-for="(item, i) in 7" :key="i">
                        <text>{{ '订单总量' }}</text>
                        <text>{{ '0.00' }}</text>
                        <text>{{ '0.00' }}%</text>
                    </view>
                    <view class="profit_text">
                        {{ '近30天的订单数据变化' }}
                    </view>
                </view>
                <UCharts :lineData="lineData" :chartsName="`统计时间${dateTime.endDate}`" />
            </view>


            <u-calendar v-model="showCalendar" mode="range" :safe-area-inset-bottom="true" btn-type="error"
                :range-color="mainColor" :active-bg-color="mainColor" :change-year="false" @change="changeCalendar">
            </u-calendar>

        </view>
        <view class="subsection" @click="handleSubsection">
            <view class="subsetion_title">

                <view>

                    设备数据
                </view>

                <view class="title_right">
                    <BaseIconModal name="info-circle" mode="bottom" size="30" color="#333" v-if="prompt">
                        {{ prompt }}
                    </BaseIconModal>
                </view>

            </view>
            <view class="profit">
                
                <view class="profit_item_box">
                    <view class="profit_item" v-for="(item, i) in 7" :key="i">
                        <text>{{ '订单总量' }}</text>
                        <text>{{ '0.00' }}</text>
                        <text>{{ '0.00' }}%</text>
                    </view>
                    <view class="profit_text">
                        {{ '近30天的订单数据变化' }}
                    </view>
                </view>
                
            </view>


         
        </view>
    </view>
</template>
<script>
import BaseNavbar from "../../components/base/BaseNavbar.vue";
import BaseSearch from "../../components/base/BaseSearch.vue";
import UCharts from "./components/UCharts.vue";
import BaseEmpty from "../../components/base/BaseEmpty.vue";
import ComList from "../../components/list/ComList.vue";
import myPull from "../../mixins/myPull";

import ChargeOrderCard from "../components/Card/ChargeOrderCard.vue";
import DataAnalysisCard from "../components/Card/DataAnalysisCard.vue";
import BaseIconModal from "@/components/base/BaseIconModal.vue";
export default {
    components: { BaseNavbar, BaseSearch, UCharts, BaseEmpty, ComList, ChargeOrderCard, DataAnalysisCard, BaseIconModal },
    mixins: [myPull()],
    data() {
        return {
            subsectionList: [
                {
                    name: '昨天',
                    date: 1,
                },
                {
                    name: '近7天',
                    date: 7,
                },
                {
                    name: '近30天',
                    date: 30,
                },
                {
                    name: '自定义',
                    isCustom: true
                }

            ],
            current: 0,
            showCalendar: false,
            lineData: {},
            mainColor: 'rgb(22, 120, 185)',
            dateTime: {//显示时间
                startDate: '',
                endDate: ''
            },
            startDate: '',//查询开始时间
            endDate: '',//查询结束时间
            queryDate: 1,//查询天数
            cardType: 'user',//user->用户数据，hotel->商户数据，device->设备数据
            hotel_id: undefined,
            device_sn: '',

            total: 0,//总数量
            searchVal: '',
            prompt: '你好'
        };
    },
    methods: {
        handleSubsection() {
            if (this.current === 3 && !this.showCalendar) this.showCalendar = true
        },
        handleData(date, startDate, endDate) {
            this.queryDate = date
            this.startDate = startDate;
            this.endDate = endDate;
            this.refresh()
        },
        changeSubsection(i) {
            this.current = i
            let selectItem = this.subsectionList[i]
            if (selectItem.isCustom) {
                this.showCalendar = true
            } else {
                console.log('切换日期', selectItem.date)
                this.handleData(selectItem.date, '', '')
            }
        },
        getList(page, done) {
            let data = {
                page,
                limit: 10,
                type: this.cardType,
                date: this.queryDate,
                start_time: this.startDate,
                end_time: this.endDate,
                keyword: this.searchVal

            }
            if (this.cardType === 'hotel') {
                data['hotel_id'] = this.hotel_id
            } else if (this.cardType === 'device') {
                data['device_sn'] = this.device_sn
            }

            this.$u.api.getUserReport(data).then(res => {
                if (page == 1) { // 第一页的时候，才传递总数
                    this.lineData = res.table;
                    this.dateTime = {
                        startDate: this.lineData[0]?.time_point,
                        endDate: this.lineData[this.lineData?.length - 1]?.time_point
                    };
                }
                this.total = res.total ?? 0;
                done(res.data);
            });
        },

        changeCalendar(e) {
            let { startDate, endDate } = e;
            this.handleData('', startDate, endDate);
        },
        search(val) {

            this.searchVal = val;
            this.refresh();
        }
    },
    onLoad(opt) {
        console.log("🚀 ~ opt", opt)
        this.cardType = opt?.cardType ?? 'user';
        this.hotel_id = opt?.hotel_id ?? undefined;
        this.device_sn = opt?.device_sn ?? undefined;


        this.handleData(1, '', '');
    },

}
</script>

<style lang="scss">
page {
    background-color: $pageBgColor;
}
</style>
<style scoped  lang='scss'>
.subsection {
    // border: 1px solid #000;
    background-color: #fff;
    padding: 20rpx;
    border-radius: 15rpx;
    margin:  20rpx;
}

.profit {
    background-color: #fff;

    &-title {
        padding: 20rpx 0;
        font-size: $font-size-middle;
        color: $textDarkGray;
    }
}

.profit_item_box {
    // border: 1px solid #000;
    display: flex;
    flex-wrap: wrap;


    .profit_item {
        border: 2rpx solid rgb(207, 205, 205);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 10rpx 20rpx;
        width: 165rpx;
    }

    .profit_text {
        font-size: 25rpx;
        color: #666;
        margin: 10rpx 0;
        width: 100%;
        text-align: center;
        // border: 1px solid #000;
    }
}

.title_right {
    width: 30rpx;
    height: 30rpx;
    margin-left: 5rpx;
    // border: 1px solid #000;
}


.subsetion_title {
    margin: 15rpx 0;
    display: flex;
    // border: 1px solid #000;
    align-items: center;
    // background-color: #333;
    // height: 120rpx;

}

.info-card {
    &-title {
        padding: 20rpx;
        padding-bottom: 0;
        font-size: $font-size-middle;
        color: $textBlack;
        font-weight: 700;
    }

    &-box {
        padding: 20rpx;
        background-color: #fff;
        background-color: #1a76b3;

    }

}
</style>